<template>
  <u-popup :show="show" mode="center"  @close="closeHandle" bgColor="transparent">
   <view class="discount-modal-a-wrapper">
      <view class="img-bg-wrapper">
        <image class="img-bg" :src="staticImgs.bgD" mode=""></image>
      </view>
      <view class="placehoder-box"></view>
      <view class="discount-modal-a-position">
        <view class="discount-modal-a"
        >
          <view class="top-box">
            <view class="row-1">恭喜获得超值优惠</view>
              <view class="row-2">
                <view class="text-1">{{discountNum}}</view>
                <view class="text-2">折</view>
              </view>
            <view class="row-3">测评优惠券</view>  
          </view>
          <view class="bottom-box">
            <view class="btn-box" @click="confirmHandle">
              <view class="text-3">
                确定
              </view>  
            </view>
          </view>
        </view>
      </view>
    </view>
  </u-popup>
</template>

<script>
  export default{
    props:{
      discountNum:{
        type:Number,
        default:8,
      },
      visible:{
        type:Boolean,
        default:false
      }
    },
    data(){
      return {
        show:false,
        staticImgs:{
          bgD: this.imgBaseURL + '/scl/scl_ coupon_modal_bg_2.png',
        },
      }
    },
    watch:{
      visible:{
        handler(val){
          console.log('-----discountInfoModalVisible---------show===',val)
          this.show = val
        },
        immediate:true
      },
    },
    methods:{
      confirmHandle(){
        this.$emit('confirm')
      },
      closeHandle(){
        this.show = false
        this.$emit('close')
      }
    }
  }
</script>

<style lang="scss" scoped>
  .discount-modal-a-wrapper{
    position: relative;
    .img-bg-wrapper{
          display: flex;
          justify-content: center;
      position: absolute;
      z-index: 999;
      top: 0;
      left: 0;
      right: 0;
      .img-bg{
        // width: 704rpx;
        // height: 794rpx;
        width: 638rpx;
        height: 778rpx;
        margin: auto;
      }
    }
    .placehoder-box{
      height: 898rpx;
      width: 750rpx;
    }
    .discount-modal-a-position{
      position: absolute;
          display: flex;
          justify-content: center;
              flex-direction: column;
          top: 0;
      left: 0;
      right: 0;
      z-index: 999;
      .discount-modal-a{
          width: 638rpx;
          height: 778rpx;
          margin: auto;
          box-sizing: border-box;
          display: flex;
          flex-direction: column;
              justify-content: space-between;
              align-items: center;
          
          // justify-content: center;
          .top-box{
            display: flex;
            flex-direction: column;
            align-items: center;
            // justify-content: center;
            
            .row-1{
              margin-top: 270rpx;
              font-size: 30rpx;
              font-family: PingFang-SC-Bold, PingFang-SC;
              font-weight: bold;
              color: #333333;
            }
            
            .row-2{
                
                display: flex;
                .text-1{
                  font-size: 120rpx;
                  font-family: SourceHanSansCN-Bold, SourceHanSansCN;
                  font-weight: bold;
                  color: #ED722F;
                  // line-height: 180rpx;
                }
                .text-2{
                  margin-left: 6rpx;
                  font-size: 40rpx;
                  font-family: SourceHanSansCN-Bold, SourceHanSansCN;
                  font-weight: bold;
                  color: #E37A41;
                  // line-height: 60rpx;
                  display: flex;
                  align-items: flex-end;
                  box-sizing: border-box;
                  padding-bottom: 36rpx;
                }
            }
            
            .row-3{
              font-size: 24rpx;
              font-family: PingFang-SC-Bold, PingFang-SC;
              font-weight: bold;
              color: #333333;
            }
              

              

              

              
            }
            

            
            
            
          }
          
          .bottom-box{
            // margin-top: 160rpx;
            // margin-bottom: 20rpx;
            // padding-bottom: 62rpx;
            padding-bottom: 132rpx;
            .btn-box{
                font-size: 30rpx;
                font-family: PingFang-SC-Heavy, PingFang-SC;
                font-weight: 800;
                color: #BF471C;
                display: flex;
                align-items: flex-end;
                padding-bottom: 12rpx;
                
                    width: 500rpx;
                    text-align: center;
                    display: flex;
                    justify-content: center;
                    margin: auto;
                    height: 90rpx;
                
                .text-1{
                  font-size: 30rpx;
                  font-family: PingFang-SC-Heavy, PingFang-SC;
                  font-weight: 800;
                  color: #BF471C;
                }
                .text-2{
                  font-size: 50rpx;
                  font-family: PingFang-SC-Heavy, PingFang-SC;
                  font-weight: 800;
                  color: #BF471C;
                  padding-top: 20rpx;
                  margin-top: 56rpx;
                  line-height: 56rpx;
                  margin-left: 4rpx;
                  margin-right: 10rpx;
                }
                .text-3{
                  font-size: 30rpx;
                  font-family: PingFang-SC-Heavy, PingFang-SC;
                  font-weight: 800;
                  color: #BF471C;
                }
            }
          
            .coupon-close{
              font-size: 28rpx;
              font-family: PingFang-SC-Heavy, PingFang-SC;
              font-weight: 800;
              color: #C22F15;
              margin-top: 30rpx;
              text-align: center;
            }
          }
          

          
        }
      
    
    .close-icon{
      margin: auto;
      margin-top: 40rpx;
      display: flex;
      justify-content: center;
    }
    
  }
  
  

                
</style>